Pure.CSS এর Menu এবং Dropdown Customization

Web Development - পিওর.সিএসএস (Pure.CSS)

189

Pure.CSS একটি লাইটওয়েট এবং মোডুলার CSS ফ্রেমওয়ার্ক যা খুবই সহজে ওয়েব অ্যাপ্লিকেশন এবং ওয়েবসাইটের ইউআই ডিজাইন করতে ব্যবহৃত হয়। এটি menu এবং dropdown তৈরি করার জন্য কিছু ডিফল্ট স্টাইল প্রদান করে। আপনি চাইলে Pure.CSS এর মেনু এবং ড্রপডাউন কাস্টমাইজ করে আপনার ওয়েবসাইটের জন্য বিভিন্ন ধরনের মেনু এবং ড্রপডাউন মেনু তৈরি করতে পারেন।

এখানে Pure.CSS এর Menu এবং Dropdown কাস্টমাইজেশন সংক্রান্ত কিছু উদাহরণ দেয়া হলো।

1. Basic Menu with Pure.CSS

Pure.CSS এর মধ্যে একটি সিম্পল মেনু তৈরি করা খুবই সহজ। pure-menu ক্লাস ব্যবহার করলে একটি সুন্দর, সহজ এবং রেসপন্সিভ মেনু তৈরি করা যায়।

Basic Menu Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="path/to/pure-min.css">
  <title>Pure.CSS Basic Menu</title>
</head>
<body>

  <nav class="pure-menu pure-menu-horizontal">
    <a href="#" class="pure-menu-heading pure-menu-link">My Website</a>
    <ul class="pure-menu-list">
      <li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
      <li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
      <li class="pure-menu-item"><a href="#" class="pure-menu-link">Services</a></li>
      <li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
    </ul>
  </nav>

</body>
</html>

ব্যাখ্যা:

pure-menu: এটি মেনুর মূল ক্লাস যা মেনুর স্টাইল অ্যাপ্লাই করে।
pure-menu-horizontal: এটি মেনুর আইটেমগুলিকে অনুভূমিকভাবে সাজায়। আপনি যদি মেনুটিকে উল্লম্বভাবে (vertical) চান, তাহলে pure-menu-vertical ব্যবহার করতে পারেন।
pure-menu-item: এটি মেনুর প্রতিটি আইটেমকে স্টাইল করে।

এটি একটি বেসিক এবং সিম্পল মেনু তৈরি করবে যা ওয়েব পেজের শীর্ষে থাকবে।

2. Dropdown Menu with Pure.CSS

Pure.CSS এর মাধ্যমে একটি সুন্দর এবং সিম্পল ড্রপডাউন মেনু তৈরি করা যায়। এই মেনুতে আপনি মাউস হোভার করার সাথে সাথে ড্রপডাউন উপাদানটি দেখতে পাবেন।

Dropdown Menu Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="path/to/pure-min.css">
  <title>Pure.CSS Dropdown Menu</title>
  <style>
    .pure-menu-has-children:hover > .pure-menu-children {
      display: block; /* Show the dropdown when hovering */
    }
    .pure-menu-children {
      display: none; /* Hide the dropdown by default */
    }
  </style>
</head>
<body>

  <nav class="pure-menu pure-menu-horizontal">
    <a href="#" class="pure-menu-heading pure-menu-link">My Website</a>
    <ul class="pure-menu-list">
      <li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
      <li class="pure-menu-item pure-menu-has-children">
        <a href="#" class="pure-menu-link">Services</a>
        <ul class="pure-menu-children">
          <li class="pure-menu-item"><a href="#" class="pure-menu-link">Web Design</a></li>
          <li class="pure-menu-item"><a href="#" class="pure-menu-link">SEO</a></li>
          <li class="pure-menu-item"><a href="#" class="pure-menu-link">Marketing</a></li>
        </ul>
      </li>
      <li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
      <li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
    </ul>
  </nav>

</body>
</html>

ব্যাখ্যা:

pure-menu-has-children: এই ক্লাসটি ড্রপডাউন মেনুর জন্য ব্যবহার করা হয়। এটি মেনু আইটেমকে অন্য সাব-মেনু আইটেমের সাথে লিঙ্ক করে।
pure-menu-children: এটি সাব-ড্রপডাউন মেনুর ক্লাস। শুরুতে এটি লুকানো থাকে এবং hover ইভেন্টে এটি প্রদর্শিত হয়।
CSS hover effect: আমরা CSS দিয়ে ড্রপডাউন মেনুকে hover স্টেটের জন্য দেখানোর নির্দেশনা দিয়েছি।

এটি একটি সহজ ড্রপডাউন মেনু তৈরি করবে, যা শুধুমাত্র মাউস হোভার করার পরেই দেখা যাবে।

3. Dropdown Menu with Click (Toggle) Using Pure.CSS

মাউস হোভার করার পরিবর্তে আপনি চাইলে ক্লিকের মাধ্যমে ড্রপডাউন মেনু টগল করতে পারেন। এটি JavaScript বা কাস্টম CSS ব্যবহার করে করা সম্ভব।

Dropdown Menu with Toggle (Click) Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="path/to/pure-min.css">
  <title>Pure.CSS Dropdown Toggle</title>
  <style>
    .pure-menu-has-children > a {
      cursor: pointer;
    }
    .pure-menu-children {
      display: none;
    }
    .pure-menu-has-children.open > .pure-menu-children {
      display: block;
    }
  </style>
</head>
<body>

  <nav class="pure-menu pure-menu-horizontal">
    <a href="#" class="pure-menu-heading pure-menu-link">My Website</a>
    <ul class="pure-menu-list">
      <li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
      <li class="pure-menu-item pure-menu-has-children" onclick="toggleDropdown(this)">
        <a href="#" class="pure-menu-link">Services</a>
        <ul class="pure-menu-children">
          <li class="pure-menu-item"><a href="#" class="pure-menu-link">Web Design</a></li>
          <li class="pure-menu-item"><a href="#" class="pure-menu-link">SEO</a></li>
          <li class="pure-menu-item"><a href="#" class="pure-menu-link">Marketing</a></li>
        </ul>
      </li>
      <li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
      <li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
    </ul>
  </nav>

  <script>
    function toggleDropdown(element) {
      element.classList.toggle('open');
    }
  </script>

</body>
</html>

ব্যাখ্যা:

JavaScript toggle: onclick="toggleDropdown(this)" এই ইভেন্টটি ড্রপডাউন মেনুর open ক্লাস টগল করে, যা pure-menu-children কে দেখাবে বা লুকাবে।
CSS for toggle: pure-menu-has-children.open এই ক্লাসে ড্রপডাউন দেখানো হয় যদি open ক্লাস থাকে।

এটি ক্লিকের মাধ্যমে ড্রপডাউন মেনু টগল করার জন্য একটি সিম্পল কৌশল।

4. Styling Dropdown with Hover and Active States

Pure.CSS এর ড্রপডাউন মেনুতে hover এবং active states কাস্টমাইজ করার জন্য আপনি অতিরিক্ত CSS ব্যবহার করতে পারেন। এটি আপনাকে মেনু এবং ড্রপডাউন আইটেমগুলির ইন্টারঅ্যাকশন আরও সুন্দর করে তোলে।

<style>
  .pure-menu-link:hover {
    background-color: #eee;
  }
  .pure-menu-item.active > .pure-menu-link {
    background-color: #ccc;
  }
</style>

এটি ড্রপডাউন মেনুর হোভার এবং অ্যাকটিভ স্টেটের জন্য একটি সাধারণ কাস্টম স্টাইল যা মেনু এবং লিঙ্কগুলিকে আরও আকর্ষণীয় করে।

Pure.CSS ব্যবহার করে আপনি সহজেই সুন্দর এবং রেসপন্সিভ মেনু ও ড্রপডাউন মেনু তৈরি করতে পারেন। এটি pure-menu, pure-menu-children, pure-menu-has-children, এবং pure-menu-link ক্লাসগুলির সাহায্যে মেনু স্টাইল এবং কাস্টমাইজেশন করার জন্য শক্তিশালী টুলস প্রদান করে। Hover এবং Click (Toggle) ইভেন্টের মাধ্যমে আপনি ড্রপডাউন মেনুর ইন্টারঅ্যাকশন কাস্টমাইজ করতে পারেন এবং আপনার ওয়েবসাইটের ইউআই ডিজাইনকে উন্নত করতে পারেন।

Content added By

Najjar Hossain Raju

161

Pure.CSS দিয়ে Custom Menu এবং Navbar তৈরি করা খুবই সহজ এবং এর জন্য আপনি কিছু নির্দিষ্ট ক্লাস ব্যবহার করে সুন্দর এবং রেসপন্সিভ মেনু তৈরি করতে পারেন। Pure.CSS আপনাকে মেনু এবং নেভিগেশন বার (Navbar) তৈরি করতে সহজ টেমপ্লেট প্রদান করে, যা বিভিন্ন স্ক্রীন সাইজ অনুযায়ী রেসপন্সিভ হবে।

এখানে আমরা Pure.CSS ব্যবহার করে Custom Menu এবং Navbar তৈরি করার কিছু উদাহরণ দেখব।

1. Basic Custom Navbar in Pure.CSS

Pure.CSS এর মাধ্যমে একটি সিম্পল এবং বেসিক Navbar তৈরি করা সম্ভব। এখানে আমরা একটি Horizontal Navbar তৈরি করবো।

Basic Navbar Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="path/to/pure-min.css">
  <title>Basic Navbar</title>
  <style>
    .navbar {
      background-color: #4CAF50;
      padding: 10px 20px;
    }
    .navbar a {
      color: white;
      padding: 10px 15px;
      text-decoration: none;
      display: inline-block;
    }
    .navbar a:hover {
      background-color: #45a049;
    }
  </style>
</head>
<body>

  <div class="navbar">
    <a href="#home">Home</a>
    <a href="#services">Services</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>

</body>
</html>

ব্যাখ্যা:

.navbar: এটি আমাদের ন্যাভিগেশন বার, যেখানে background-color, padding এবং অন্যান্য স্টাইল ব্যবহার করা হয়েছে।
a: লিঙ্কগুলির জন্য স্টাইল, যেখানে padding এবং color দেওয়া হয়েছে।
a:hover: মাউস হোভার করার সময় লিঙ্কের ব্যাকগ্রাউন্ড পরিবর্তিত হবে।

এইভাবে একটি সিম্পল এবং কাস্টম horizontal navbar তৈরি করা হয়েছে।

2. Custom Dropdown Menu in Navbar

একটি Dropdown Menu তৈরি করতে, Pure.CSS এর মাধ্যমে আপনি খুব সহজে ড্রপডাউন মেনু তৈরি করতে পারেন। এখানে, আমরা একটি ড্রপডাউন মেনু যোগ করবো যা শুধুমাত্র হোভার করলে উন্মুক্ত হবে।

Dropdown Menu Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="path/to/pure-min.css">
  <title>Navbar with Dropdown</title>
  <style>
    .navbar {
      background-color: #333;
      overflow: hidden;
    }

    .navbar a {
      float: left;
      display: block;
      color: white;
      text-align: center;
      padding: 14px 20px;
      text-decoration: none;
    }

    .navbar a:hover {
      background-color: #ddd;
    }

    .dropdown {
      float: left;
      overflow: hidden;
    }

    .dropdown .dropbtn {
      background-color: #333;
      color: white;
      padding: 14px 20px;
      font-size: 16px;
      border: none;
      cursor: pointer;
    }

    .navbar a, .dropdown:hover .dropbtn {
      background-color: #ddd;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #333;
      min-width: 160px;
      box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
      z-index: 1;
    }

    .dropdown-content a {
      color: white;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }

    .dropdown-content a:hover {
      background-color: #ddd;
    }

    .dropdown:hover .dropdown-content {
      display: block;
    }
  </style>
</head>
<body>

  <div class="navbar">
    <a href="#home">Home</a>
    <a href="#services">Services</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
    
    <!-- Dropdown Menu -->
    <div class="dropdown">
      <button class="dropbtn">More</button>
      <div class="dropdown-content">
        <a href="#news">News</a>
        <a href="#events">Events</a>
        <a href="#updates">Updates</a>
      </div>
    </div>
  </div>

</body>
</html>

ব্যাখ্যা:

.navbar: ন্যাভিগেশন বারটি ডিফাইন করা হয়েছে।
.dropdown: ড্রপডাউন মেনু একটি div হিসেবে তৈরি করা হয়েছে।
.dropdown-content: এই অংশে ড্রপডাউন মেনুর লিঙ্কগুলি থাকে, যা সাধারণত প্রদর্শিত হয় না।
:hover: ড্রপডাউন মেনুর উপর মাউস হোভার করলে dropdown-content প্রদর্শিত হয়।

এই কোডে একটি সিম্পল dropdown menu তৈরি করা হয়েছে যা হোভার করলে মেনু আইটেমগুলি প্রদর্শিত হয়।

3. Responsive Navbar with Pure.CSS

Responsive Navbar তৈরি করা খুবই গুরুত্বপূর্ণ, বিশেষ করে মোবাইল ডিভাইসের জন্য। Pure.CSS এর মাধ্যমে রেসপন্সিভ নেভিগেশন বার তৈরি করার জন্য, আপনি মিডিয়া কোয়ারি ব্যবহার করতে পারেন যাতে ছোট স্ক্রীনে নেভিগেশন বারটি সহজে ব্যবহৃত হয় এবং কল্যাপসেবল হয়।

Responsive Navbar Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="path/to/pure-min.css">
  <title>Responsive Navbar</title>
  <style>
    .navbar {
      background-color: #333;
      overflow: hidden;
    }

    .navbar a {
      float: left;
      display: block;
      color: white;
      text-align: center;
      padding: 14px 20px;
      text-decoration: none;
    }

    .navbar a:hover {
      background-color: #ddd;
    }

    @media screen and (max-width: 600px) {
      .navbar a {
        float: none;
        display: block;
        text-align: left;
      }
    }
  </style>
</head>
<body>

  <div class="navbar">
    <a href="#home">Home</a>
    <a href="#services">Services</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>

</body>
</html>

ব্যাখ্যা:

@media screen and (max-width: 600px): স্ক্রীনের সাইজ যদি 600px এর নিচে হয়, তাহলে নেভিগেশন বারটি একক কলামে পরিবর্তিত হবে এবং প্রতিটি আইটেম নিচে চলে যাবে।
Responsive behavior: ছোট স্ক্রীনে আইটেমগুলো ভরাট হয়ে যাবে এবং বড় স্ক্রীনে এক সারিতে থাকবে।

4. Customizing the Navbar

Pure.CSS এর মাধ্যমে আপনি সহজে Navbar কাস্টমাইজ করতে পারেন। আপনি background color, font style, hover effects এবং আরও অনেক কিছু কাস্টমাইজ করতে পারেন।

Customized Navbar Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="path/to/pure-min.css">
  <style>
    .navbar {
      background-color: #1E90FF;
      padding: 10px 20px;
    }
    
    .navbar a {
      color: white;
      text-align: center;
      padding: 10px 20px;
      text-decoration: none;
      font-size: 16px;
    }

    .navbar a:hover {
      background-color: #4682B4;
      color: yellow;
    }
  </style>
  <title>Customized Navbar</title>
</head>
<body>

  <div class="navbar">
    <a href="#home">Home</a>
    <a href="#services">Services</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>

</body>
</html>

ব্যাখ্যা:

background-color: নেভিগেশন বারটির ব্যাকগ্রাউন্ড কালার কাস্টমাইজ করা হয়েছে।
hover: হোভার ইফেক্টে বাটনের ব্যাকগ্রাউন্ড পরিবর্তিত হয় এবং টেক্সট কালার সাদা থেকে হলুদ হয়ে যায়।

Pure.CSS দিয়ে Custom Menus এবং Navbars তৈরি করা খুবই সহজ এবং কার্যকরী। আপনি সিম্পল এবং কাস্টম স্টাইলের নেভিগেশন বার তৈরি করতে পারেন, যা রেসপন্সিভ এবং মোবাইল ফ্রেন্ডলি হবে।

Content added By

Najjar Hossain Raju

267

Pure.CSS ব্যবহার করে Dropdown Menu তৈরি এবং তার Styling ও Animation করা সহজ। Pure.CSS একটি লাইটওয়েট CSS ফ্রেমওয়ার্ক হওয়ায়, এটি দ্রুত ওয়েব ডেভেলপমেন্টে সহায়তা করে, এবং আপনি সহজেই সুন্দর এবং কার্যকরী ড্রপডাউন মেনু তৈরি করতে পারেন। এখানে আমরা Dropdown Menu এর স্টাইলিং এবং অ্যানিমেশন যুক্ত করার জন্য কিছু উদাহরণ দেখব।

১. Basic Dropdown Menu Styling

Pure.CSS-এ একটি সাধারণ ড্রপডাউন মেনু তৈরি করার জন্য আপনাকে কিছু বেসিক স্টাইল প্রয়োগ করতে হবে। আমরা Pure.CSS এর pure-button এবং pure-menu ক্লাস ব্যবহার করে একটি ড্রপডাউন মেনু তৈরি করব।

উদাহরণ: Basic Dropdown Menu

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pure.CSS Dropdown Menu</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
  <style>
    /* Dropdown Menu Styling */
    .dropdown {
      position: relative;
      display: inline-block;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f1f1f1;
      min-width: 160px;
      box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
      z-index: 1;
    }

    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }

    .dropdown-content a:hover {
      background-color: #ddd;
    }

    .dropdown:hover .dropdown-content {
      display: block;
    }

    .dropdown:hover .dropbtn {
      background-color: #3e8e41;
    }
  </style>
</head>
<body>

  <div class="dropdown">
    <button class="pure-button pure-button-primary dropbtn">Dropdown</button>
    <div class="dropdown-content">
      <a href="#">Option 1</a>
      <a href="#">Option 2</a>
      <a href="#">Option 3</a>
    </div>
  </div>

</body>
</html>

ব্যাখ্যা:

Dropdown: এই ক্লাসটি ড্রপডাউন মেনুর প্রধান কনটেইনারের জন্য।
Dropdown-content: এটি মেনুর অপশনগুলো ধারণ করে এবং display: none দিয়ে প্রথমে এটি হাইড থাকে।
Dropdown:hover: যখন আপনি ড্রপডাউন বাটনে হোভার করবেন, তখন dropdown-content মেনু অপশনটি প্রদর্শিত হবে।
pure-button: Pure.CSS এর স্টাইল করা বাটন যা ড্রপডাউন ট্রিগার হিসেবে কাজ করবে।

এটি একটি সিম্পল ড্রপডাউন মেনু তৈরি করবে, যেখানে বাটনে হোভার করলে মেনু অপশনগুলি দেখা যাবে।

২. Dropdown Menu with Animation

এখন, আমরা ড্রপডাউন মেনুর জন্য CSS Animation যোগ করব, যাতে মেনুটি সুন্দরভাবে প্রবাহিত হয়ে প্রদর্শিত হয়।

উদাহরণ: Dropdown Menu with Animation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pure.CSS Dropdown Menu with Animation</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
  <style>
    /* Dropdown Menu Styling */
    .dropdown {
      position: relative;
      display: inline-block;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f1f1f1;
      min-width: 160px;
      box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
      z-index: 1;
      opacity: 0;
      transition: opacity 0.3s ease; /* Animation for opacity */
    }

    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }

    .dropdown-content a:hover {
      background-color: #ddd;
    }

    .dropdown:hover .dropdown-content {
      display: block;
      opacity: 1; /* Fade-in effect */
    }

    .dropdown:hover .dropbtn {
      background-color: #3e8e41;
    }
  </style>
</head>
<body>

  <div class="dropdown">
    <button class="pure-button pure-button-primary dropbtn">Dropdown</button>
    <div class="dropdown-content">
      <a href="#">Option 1</a>
      <a href="#">Option 2</a>
      <a href="#">Option 3</a>
    </div>
  </div>

</body>
</html>

ব্যাখ্যা:

transition: transition: opacity 0.3s ease; CSS অ্যানিমেশন যুক্ত করার জন্য ব্যবহৃত হয়েছে, যা মেনু উপাদানটির opacity পরিবর্তন করবে 0.3 সেকেন্ডের মধ্যে।
opacity: ডিফল্টভাবে মেনু আইটেমগুলোর opacity: 0 থাকে, যা লুকানো থাকে। যখন আপনি ড্রপডাউন বাটনে হোভার করবেন, তখন opacity: 1 হয়ে যাবে এবং মেনুটি ধীরে ধীরে দৃশ্যমান হবে।
:hover: যখন ব্যবহারকারী ড্রপডাউন বাটনে হোভার করে, তখন dropdown-content মেনু অপশনগুলি প্রদর্শিত হবে এবং সুন্দরভাবে ফেইড ইন (ধীরে ধীরে প্রদর্শিত হবে) হবে।

এটি একটি fade-in animation যোগ করবে, যা ড্রপডাউন মেনু অপশনগুলোকে ধীরে ধীরে প্রদর্শন করবে।

৩. Dropdown Menu with Hover and Click Trigger

ড্রপডাউন মেনুর ক্ষেত্রে আপনি কেবল hover নয়, বরং click এর মাধ্যমে মেনু দেখানোর কার্যকলাপও করতে পারেন। এই উদাহরণে, মেনু শুধু তখনই প্রদর্শিত হবে যখন ব্যবহারকারী ড্রপডাউন বাটনে ক্লিক করবে।

উদাহরণ: Dropdown Menu with Click Trigger

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pure.CSS Dropdown Menu with Click Trigger</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
  <style>
    .dropdown {
      position: relative;
      display: inline-block;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f1f1f1;
      min-width: 160px;
      box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
      z-index: 1;
    }

    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }

    .dropdown-content a:hover {
      background-color: #ddd;
    }

    /* Show the dropdown content when clicked */
    .dropdown.show .dropdown-content {
      display: block;
    }
    
    .dropdown.show .dropbtn {
      background-color: #3e8e41;
    }
  </style>
</head>
<body>

  <div class="dropdown">
    <button class="pure-button pure-button-primary dropbtn" onclick="toggleDropdown()">Dropdown</button>
    <div class="dropdown-content">
      <a href="#">Option 1</a>
      <a href="#">Option 2</a>
      <a href="#">Option 3</a>
    </div>
  </div>

  <script>
    function toggleDropdown() {
      var dropdown = document.querySelector('.dropdown');
      dropdown.classList.toggle('show');
    }
  </script>

</body>
</html>

ব্যাখ্যা:

.dropdown.show .dropdown-content: ক্লিক করার পরে show ক্লাস যোগ হয়ে গেলে, মেনু অপশনগুলো প্রদর্শিত হবে।
toggleDropdown(): এটি একটি জাভাস্ক্রিপ্ট ফাংশন, যা ড্রপডাউন বাটনে ক্লিক করলে show ক্লাসটি dropdown কনটেইনারে টগল (যোগ বা মুছে ফেল) করবে।
pure-button: Pure.CSS এর একটি স্টাইল করা বাটন, যা ড্রপডাউন মেনুর ট্রিগার হিসেবে কাজ করবে।

এখানে, মেনু click ইভেন্ট দ্বারা ট্রিগার হচ্ছে, এবং মেনুটি শুধুমাত্র ক্লিকের মাধ্যমে প্রদর্শিত হচ্ছে।

Pure.CSS দিয়ে ড্রপডাউন মেনু তৈরি এবং স্টাইলিং করা খুবই সহজ এবং দ্রুত। আপনি hover বা click ইভেন্ট ব্যবহার করে ড্রপডাউন মেনু তৈরি করতে পারেন এবং CSS Animation এর মাধ্যমে সুন্দর অ্যানিমেশন যোগ করতে পারেন। Pure.CSS এর সাথে এই ধরনের কার্যকারিতা অন্তর্ভুক্ত করার ফলে আপনার ওয়েব পেজে ব্যবহারকারীর জন্য সুন্দর এবং ইন্টারঅ্যাকটিভ নেভিগেশন তৈরি করা সম্ভব।

Content added By

Najjar Hossain Raju

208

Pure.CSS ব্যবহার করে Responsive Navbar এবং Menu Items এর কাস্টমাইজেশন করা খুবই সহজ। Pure.CSS একটি লাইটওয়েট, মোডুলার CSS ফ্রেমওয়ার্ক যা দ্রুত ওয়েব ডেভেলপমেন্টে সহায়তা করে, বিশেষ করে ওয়েবসাইটের Navigation Bar এবং Menu তৈরি করতে। এখানে Responsive Navbar তৈরি করার পদ্ধতি এবং Menu Items এর কাস্টমাইজেশন নিয়ে বিস্তারিত আলোচনা করা হলো।

1. Responsive Navbar with Pure.CSS

Responsive navbar তৈরি করা হয় যাতে এটি মোবাইল ডিভাইসে হ্যামবার্গার মেনু হিসেবে কাজ করে এবং ডেস্কটপ স্ক্রীনে সাধারণভাবে দেখায়। আমরা Pure.CSS এর Flexbox ব্যবহার করে এটি তৈরি করতে পারি, যাতে একটি সিম্পল এবং রেসপনসিভ নেভিগেশন বার পাওয়া যায়।

Responsive Navbar Example with Pure.CSS:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Navbar with Pure.CSS</title>
  <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
  <style>
    /* Navbar Styles */
    .navbar {
      background-color: #4CAF50;
      padding: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .navbar a {
      color: white;
      text-decoration: none;
      padding: 14px 20px;
      transition: background-color 0.3s;
    }

    .navbar a:hover {
      background-color: #45a049;
    }

    /* Hamburger Menu */
    .navbar .menu-icon {
      display: none;
      cursor: pointer;
      font-size: 24px;
      color: white;
    }

    /* For Mobile Devices */
    @media screen and (max-width: 600px) {
      .navbar a {
        display: none;
        width: 100%;
        text-align: center;
        padding: 10px 0;
      }

      .navbar .menu-icon {
        display: block;
      }

      .navbar.responsive a {
        display: block;
      }
    }
  </style>
</head>
<body>

  <div class="navbar" id="navbar">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Contact</a>
    <span class="menu-icon" onclick="toggleMenu()">☰</span>
  </div>

  <script>
    function toggleMenu() {
      var navbar = document.getElementById("navbar");
      navbar.classList.toggle("responsive");
    }
  </script>

</body>
</html>

ব্যাখ্যা:

Flexbox Layout: display: flex; এবং justify-content: space-between; ব্যবহার করে নেভিগেশন বারটি তৈরি করা হয়েছে, যা আইটেমগুলিকে সঠিকভাবে সজ্জিত রাখবে।
Hamburger Menu: মোবাইল স্ক্রীনে একটি ☰ আইকন (Hamburger Menu) দেখানো হচ্ছে, যা ব্যবহারকারী ক্লিক করলে মেনু আইটেমগুলি দেখাবে।
Media Query: @media screen and (max-width: 600px) দ্বারা মোবাইল স্ক্রীনে নেভিগেশন বারটি একটি একক কলামে সজ্জিত করা হয়।
Responsive Class: JavaScript এর মাধ্যমে toggleMenu() ফাংশন ব্যবহার করে মেনু আইটেমগুলি টগল করা হয়। যখন ক্লিক করা হয়, তখন মেনু আইটেমগুলো দৃশ্যমান হয়ে যাবে।

2. Customization of Menu Items

Menu Items কাস্টমাইজ করার জন্য, আপনি CSS দিয়ে বিভিন্ন স্টাইলিং ব্যবহার করতে পারেন। এখানে, আমরা hover effects, active states, text formatting, এবং spacing কাস্টমাইজ করব।

Customized Menu Items Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Customized Menu Items with Pure.CSS</title>
  <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
  <style>
    /* Navbar Styles */
    .navbar {
      background-color: #333;
      padding: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    /* Styling Menu Links */
    .navbar a {
      color: white;
      text-decoration: none;
      padding: 14px 20px;
      text-transform: uppercase;
      font-weight: bold;
      border-radius: 5px;
      transition: background-color 0.3s, color 0.3s;
    }

    /* Hover Effect */
    .navbar a:hover {
      background-color: #4CAF50;
      color: white;
    }

    /* Active Link */
    .navbar a.active {
      background-color: #45a049;
      color: white;
    }

    /* For Mobile Devices */
    .navbar .menu-icon {
      display: none;
      cursor: pointer;
      font-size: 24px;
      color: white;
    }

    /* For Smaller Screens */
    @media screen and (max-width: 600px) {
      .navbar a {
        display: none;
        width: 100%;
        text-align: center;
        padding: 10px 0;
      }

      .navbar .menu-icon {
        display: block;
      }

      .navbar.responsive a {
        display: block;
      }
    }
  </style>
</head>
<body>

  <div class="navbar" id="navbar">
    <a href="#" class="active">Home</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Contact</a>
    <span class="menu-icon" onclick="toggleMenu()">☰</span>
  </div>

  <script>
    function toggleMenu() {
      var navbar = document.getElementById("navbar");
      navbar.classList.toggle("responsive");
    }
  </script>

</body>
</html>

ব্যাখ্যা:

Text Customization: text-transform: uppercase; এবং font-weight: bold; ব্যবহার করে মেনু আইটেমগুলির টেক্সট ফরম্যাট করা হয়েছে, যাতে এটি আরও স্পষ্ট এবং অ্যাট্রাকটিভ হয়।
Hover Effect: :hover পসুডো ক্লাস ব্যবহার করে মেনু লিঙ্কের উপর মাউস হোভার করলে ব্যাকগ্রাউন্ড কালার এবং টেক্সট কালার পরিবর্তিত হবে।
Active Link Styling: active ক্লাস ব্যবহার করে বর্তমান পেজের মেনু আইটেমটিকে আলাদা করে দেখানো হয়েছে।
Responsive Design: Hamburger Menu তৈরি করা হয়েছে মোবাইল স্ক্রীনে, এবং মেনু আইটেমগুলি মোবাইল স্ক্রীনে সোজা লাইনে সজ্জিত হবে।

3. Further Customizations for Menu and Navbar

Menu এবং Navbar কাস্টমাইজ করার জন্য অনেক সুবিধা প্রদান করে, যেমন:

Dropdown Menus: আপনি নেভিগেশন বারের মধ্যে ড্রপডাউন মেনু তৈরি করতে পারেন।
Icons in Menu Items: আইকন যুক্ত করতে পারেন মেনু আইটেমগুলির পাশে, যেমন FontAwesome বা Material Icons।
Fixed Navbar: নেভিগেশন বারটিকে স্ক্রোল করার সময় উপরে ফিক্সড রাখা যায়।

Example of a Fixed Navbar with Icons:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fixed Navbar with Icons</title>
  <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <style>
    /* Fixed Navbar */
    .navbar {
      position: fixed;
      top: 0;
      width: 100%;
      background-color: #333;
      padding: 10px;
      z-index: 1000;
    }

    .navbar a {
      color: white;
      text-decoration: none;
      padding: 14px 20px;
      display: inline-block;
      transition: background-color 0.3s;
    }

    .navbar a:hover {
      background-color: #4CAF50;
    }

    /* Icons */
    .navbar i {
      margin-right: 8px; /* Spacing between icon and text */
    }

    /* Body content */
    body {
      margin-top: 60px; /* To ensure content doesn't hide behind fixed navbar */
    }
  </style>
</head>
<body>

  <div class="navbar">
    <a href="#"><i class="fas fa-home"></i> Home</a>
    <a href="#"><i class="fas fa-info-circle"></i> About</a>
    <a href="#"><i class="fas fa-cogs"></i> Services</a>
    <a href="#"><i class="fas fa-envelope"></i> Contact</a>
  </div>

  <div class="content">
    <h1>Welcome to the Page</h1>
    <p>This is a fixed navigation bar with icons.</p>
  </div>

</body>
</html>

ব্যাখ্যা:

Fixed Navbar: position: fixed; এবং top: 0; ব্যবহার করে নেভিগেশন বারটিকে স্ক্রোলের পরেও স্ক্রীনের উপরে ফিক্সড রাখা হয়েছে।
FontAwesome Icons: FontAwesome আইকন ব্যবহার করা হয়েছে মেনু আইটেমগুলির পাশে, যাতে আরও ইন্টারেক্টিভ এবং গ্রাফিক্যাল লুক পাওয়া যায়।

Pure.CSS এর সাহায্যে আপনি একটি Responsive Navbar এবং Menu Items তৈরি করতে পারেন এবং সেগুলিকে কাস্টমাইজ করতে পারেন সহজেই। Flexbox এবং Media Queries ব্যবহার করে আপনি মোবাইল এবং ডেস্কটপ উভয় স্ক্রীনে সুন্দরভাবে কাজ করা নেভিগেশন বার তৈরি করতে পারবেন। আপনি মেনু আইটেমগুলির উপর Hover Effects, Active States, Icons, এবং Fixed Navigation যোগ করতে পারেন আপনার ওয়েবসাইটের ইন্টারফেস আরও আকর্ষণীয় এবং ইউজার-ফ্রেন্ডলি করার জন্য।

Content added By

Najjar Hossain Raju

145

Pure.CSS দিয়ে আপনি খুব সহজেই Sticky Menu এবং Sidebar Navigation তৈরি করতে পারেন। এখানে একটি উদাহরণ দেওয়া হলো যাতে আপনি বুঝতে পারবেন কিভাবে Sticky Menu এবং Sidebar Navigation তৈরি করা যায়।

১. Sticky Menu with Pure.CSS

Sticky Menu এমন একটি মেনু যা স্ক্রল করার পরও পেজের উপর স্থির থাকে। Pure.CSS এর সাহায্যে খুব সহজে এই ধরনের মেনু তৈরি করা সম্ভব।

উদাহরণ: Sticky Menu

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
  <title>Sticky Menu with Pure.CSS</title>
  <style>
    /* Sticky menu styles */
    .sticky-menu {
      position: -webkit-sticky; /* For Safari */
      position: sticky;
      top: 0;
      background-color: #333;
      padding: 10px;
      z-index: 1000;
    }
    .sticky-menu a {
      color: white;
      text-decoration: none;
      padding: 10px 20px;
      display: inline-block;
      margin-right: 10px;
      transition: background-color 0.3s;
    }
    .sticky-menu a:hover {
      background-color: #555;
    }
  </style>
</head>
<body>

  <div class="sticky-menu pure-menu pure-menu-horizontal">
    <a href="#" class="pure-menu-item">Home</a>
    <a href="#" class="pure-menu-item">About</a>
    <a href="#" class="pure-menu-item">Services</a>
    <a href="#" class="pure-menu-item">Contact</a>
  </div>

  <div style="height: 1500px;"> <!-- Long content to enable scrolling -->
    <p>Scroll down to see the sticky menu in action.</p>
  </div>

</body>
</html>

উদাহরণ বিশ্লেষণ:

position: sticky: এই CSS প্রপার্টি মেনুকে স্ক্রল করার সময় পৃষ্ঠার উপরে আটকিয়ে রাখে।
top: 0: এটি নিশ্চিত করে যে মেনুটি পৃষ্ঠার শীর্ষে থাকবে।
z-index: 1000: এটি মেনুটিকে অন্যান্য উপাদানগুলির উপরে রাখে যাতে মেনুটি সবসময় দৃশ্যমান থাকে।
pure-menu-horizontal: Pure.CSS ক্লাস যা মেনু আইটেমগুলোকে অনুভূমিকভাবে সাজায়।

২. Sidebar Navigation with Pure.CSS

Sidebar Navigation এমন একটি নেভিগেশন প্যানেল যা সাধারণত পেজের বাম বা ডান পাশে স্থাপন করা হয় এবং ব্যবহারকারী যখন স্ক্রল করে তখন এটি ভিউতে থাকে।

উদাহরণ: Sidebar Navigation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
  <title>Sidebar Navigation with Pure.CSS</title>
  <style>
    /* Sidebar Styles */
    .sidebar {
      height: 100%;
      width: 250px;
      position: fixed;
      top: 0;
      left: 0;
      background-color: #333;
      padding-top: 20px;
    }

    .sidebar a {
      color: white;
      text-decoration: none;
      display: block;
      padding: 10px 15px;
      transition: background-color 0.3s;
    }

    .sidebar a:hover {
      background-color: #555;
    }

    /* Content Style */
    .content {
      margin-left: 260px; /* To make room for the sidebar */
      padding: 20px;
    }
  </style>
</head>
<body>

  <div class="sidebar">
    <a href="#" class="pure-menu-item">Home</a>
    <a href="#" class="pure-menu-item">About</a>
    <a href="#" class="pure-menu-item">Services</a>
    <a href="#" class="pure-menu-item">Contact</a>
  </div>

  <div class="content">
    <h1>Sidebar Navigation Example</h1>
    <p>This is an example of a sidebar navigation layout with Pure.CSS.</p>
    <p>Scroll down to see more content.</p>
    <div style="height: 1500px;"></div> <!-- Long content to enable scrolling -->
  </div>

</body>
</html>

উদাহরণ বিশ্লেষণ:

position: fixed: এই CSS প্রপার্টি সাইডবারকে পৃষ্ঠার বাম দিকে স্থির রাখে, যাতে স্ক্রল করলে সাইডবারটি নড়েচড়ে না যায়।
height: 100%: এটি সাইডবারকে পুরো পৃষ্ঠার উচ্চতার সমান করে দেয়।
margin-left: 260px: কন্টেন্টের ডিভে সাইডবারের জন্য যথাযথ জায়গা তৈরি করতে ব্যবহৃত হয়েছে।
sidebar a: সাইডবারের জন্য একটি ক্লাস যা ইন্টারেক্টিভ লিঙ্ক তৈরি করে।

Pure.CSS দিয়ে আপনি খুব সহজে একটি Sticky Menu এবং Sidebar Navigation তৈরি করতে পারেন। Sticky Menu পেজ স্ক্রল করার পরও উপরে থেকে লেগে থাকে, যা ব্যবহারকারীর জন্য আরও সহজ নেভিগেশন নিশ্চিত করে। Sidebar Navigation সাধারণত বড় ওয়েবসাইট বা অ্যাপ্লিকেশনে ব্যবহৃত হয়, যাতে ব্যবহারকারী সহজেই পেজের বিভিন্ন অংশে যেতে পারে। Pure.CSS এর সরল ও মডুলার স্টাইলিং ব্যবহারে এই ধরনের নেভিগেশন সহজেই তৈরি করা সম্ভব।

Content added By

Najjar Hossain Raju

Pure.CSS এর পরিচিতি Pure.CSS সেটআপ এবং ইনস্টলেশন Pure.CSS এর Responsive Grid System Pure.CSS এর টেক্সট স্টাইলিং এবং টাইপোগ্রাফি Pure.CSS এর Buttons এবং Button Groups

Pure.CSS এর Menu এবং Dropdown Customization

1. Basic Menu with Pure.CSS

Basic Menu Example:

ব্যাখ্যা:

2. Dropdown Menu with Pure.CSS

Dropdown Menu Example:

ব্যাখ্যা:

3. Dropdown Menu with Click (Toggle) Using Pure.CSS

Dropdown Menu with Toggle (Click) Example:

ব্যাখ্যা:

4. Styling Dropdown with Hover and Active States

Custom Menu এবং Navbar তৈরি করা

1. Basic Custom Navbar in Pure.CSS

Basic Navbar Example:

ব্যাখ্যা:

2. Custom Dropdown Menu in Navbar

Dropdown Menu Example:

ব্যাখ্যা:

3. Responsive Navbar with Pure.CSS

Responsive Navbar Example:

ব্যাখ্যা:

4. Customizing the Navbar

Customized Navbar Example:

ব্যাখ্যা:

Dropdown Menu এর Styling এবং Animation

১. Basic Dropdown Menu Styling

উদাহরণ: Basic Dropdown Menu

ব্যাখ্যা:

২. Dropdown Menu with Animation

উদাহরণ: Dropdown Menu with Animation

ব্যাখ্যা:

৩. Dropdown Menu with Hover and Click Trigger

উদাহরণ: Dropdown Menu with Click Trigger

ব্যাখ্যা:

Responsive Navbar এবং Menu Items এর Customization

1. Responsive Navbar with Pure.CSS

Responsive Navbar Example with Pure.CSS:

ব্যাখ্যা:

2. Customization of Menu Items

Customized Menu Items Example:

ব্যাখ্যা:

3. Further Customizations for Menu and Navbar

Example of a Fixed Navbar with Icons:

ব্যাখ্যা:

Sticky Menu এবং Sidebar Navigation তৈরি করা

১. Sticky Menu with Pure.CSS

উদাহরণ: Sticky Menu

উদাহরণ বিশ্লেষণ:

২. Sidebar Navigation with Pure.CSS

উদাহরণ: Sidebar Navigation

উদাহরণ বিশ্লেষণ:

All Notifications

Promotion

Satt AI

Hi, আমি SATT AI!